import './App.scss';
import React, { Component, lazy, Suspense } from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'

import Loading from './components/common/Loading'
import Err404 from './components/common/Err404'

export default class App extends Component {
  state = {
    hasError: '' //用于标识子组件是否产生错误
  }
  static getDerivedStateFromError(error) {
    console.log('@@@', error);
    return { hasError: error }
  }

  componentDidCatch() {
    console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
  }
  render() {
    return (
      <div id="app">
        {
          this.state.hasError ? <Err404 /> : <HashRouter>
            <Suspense fallback={<Loading />}>
              <Switch>
                <Route path='/login' component={lazy(() => import('./views/Login'))}></Route>
                <Route path='/signin' component={lazy(() => import('./views/Signin/Signin'))}></Route>
                <Route path='/' component={lazy(() => import('./views/Admin'))}></Route>
              </Switch>
            </Suspense>
          </HashRouter>
        }

      </div>
    )
  }
}
